{% extends "base.html" %}

{% block css %}
<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="/static/jQuery/jquery.cycle.all.min.js"></script>
	<script type="text/javascript">
		// Global variables
        var imageId = {{ imgId }};
		var thresholding = false;
        var thresholdingSlideIndex = 0;
        var thinningSlideIndex = 1;
        var sourceCellComplex = null;

        // ------------------
        function enableLeft(){
        // ------------------
            $("div#left_button img").attr("src", "/static/images/left.png");
            $("div#left_button img").show(1000);
        }

        // --------------------
        function disableLeft(){
        // --------------------
            $("div#left_button img").attr("src", "/static/images/left_disabled.png");
            $("div#left_button img").hide(1000);
            
        }

        // -------------------
        function enableRight(){
        // -------------------
            $("div#right_button img").attr("src", "/static/images/right.png");
            $("div#right_button img").show(1000);
        }

        // --------------------
        function disableRight(){
        // --------------------
            $("div#right_button img").attr("src", "/static/images/right_disabled.png");
            $("div#right_button img").hide(1000);
        }

        // -----------------------------
        function disableThinningSlider(){
        // -----------------------------
			$("#thinning_slider").slider('disable');
            $("#thinning_slider_value_widget input").attr("disabled", "disabled");
        }

        // ------------------------------
        function enableThinningSlider(it){
        // ------------------------------

            // Change the slider max value and the max value label
            $("#thinning_slider").slider("option", "max", it);
            $("#max_id").html(it);

            // Enable the slider 
			$("#thinning_slider").slider('enable');

            // Set the slider to the max value & show it
            $("#thinning_slider").slider("option", "value", 0);
            
            showIteration(0, it);
        }

        // ----------------------------------------------------------------------
        function prevNextClickCallback(isNext, zeroBasedSlideIndex, slideElement){
        // ----------------------------------------------------------------------
            // Setup thresholding
            if(zeroBasedSlideIndex == thresholdingSlideIndex){
                // Select thresholding in the menu
                menuSelect('threshold');
                
                // Enable the right button, disable the left
                enableRight();
                disableLeft();
            }

            // Setup thinning
            else if(zeroBasedSlideIndex == thinningSlideIndex){
                // Select thinning in the menu
                menuSelect('thin');

                // Enable the right button, disable the left
                enableLeft();
                disableRight();
                
                // Make the call to generate the cell complex
                $.post("/cell_complex/image", {"thresholdedImgId": thresholdedId}, function(data2){
                    response = jQuery.parseJSON(data2);
                    window.ccId = response[0];

                    // Draw the source cell complex
                    $("#source_cell_complex_paper").attr("src", "/cell_complex/image/" + response[0]);

                    // Draw the absolute cell complex
                    $("#absolute_cell_complex_paper").attr("src", "/cell_complex/absolute/" + response[0]);
                
                    // Draw the relative cell complex
                    $("#relative_cell_complex_paper").attr("src", "/cell_complex/relative/" + response[0]);

                    // Change the max value of the absolute slider
                    $("#absolute_slider").slider("option", "max", response[1] + 1);
                    $("#absolute_slider").slider("option", "value", 4);
                });

            }

            else alert('unknown ' + zeroBasedSlideIndex);
        }

        // ------------------------------
        function showIteration(it, maxIt){
        // ------------------------------
            if(maxIt == undefined){
                maxIt = $("#thinning_slider").slider("option", "max");
            }

            // Loop through every iteration up through this one and 
            for(i = 0; i <= maxIt; ++i){
                // Get the visibilty value from the iteration number
                if(i < it){
                    visVal = "hidden";
                }else{
                    visVal = "visible";
                }

                // Compute the selector
                selector = "#" + i;

                // Set the visibility
                $("#thinned_cell_complex_paper").contents().find(selector).css("visibility", visVal);
            }
        }

		// -------------------------
		$(document).ready(function(){
		// -------------------------
            thresholdImage(imageId, 128);
            $("#threshold_slider_value_input").attr("value", "128");

			// Initialize the threshold slider
			$("#threshold_slider").slider({
				min: 0,
				max: 255,
				stop: function(event, ui){
                    
                    // When the slider stops, we need to threshold the image at that value
                    thresholdImage(imageId, ui.value);
				},
                slide: function(event, ui){
                    $("#threshold_slider_value_input").attr("value", ui.value);
                },
                value: 128
            });
            
            // Initialize the thinning iteration slider
			$("#thinning_slider").slider({
				min: 0,
				max: 100,
				stop: function(event, ui){
                    showIteration(ui.value);
                },
                slide: function(event, ui){
                    $("#thinning_slider_value_input").attr("value", ui.value);
                },
			});
            disableThinningSlider();
            
            // Disable the absolute/relative slider input boxes
            $("#absolute_max").attr("disabled", "disabled");
            $("#relative_max").attr("disabled", "disabled");

            // Initialize the absolute slider
            $("#absolute_slider").slider({
                min: 0,
                max: 100,
                value: 4,
                slide: function(event, ui){
                    // Update the numerical display
                    $("#absolute_max").attr("value", ui.value);
                },
            });

            // Initialize the relative slider 
            $("#relative_slider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.4,
                slide: function(event, ui){
                    // Update the numerical display
                    $("#relative_max").attr("value", ui.value);
                },
            });

            // Initialize the app_tab cycle
            $('#app_tabs').cycle({ 
                    fx: 'scrollHorz',
                    timeout: 0,
                    prev: '#left_button',
                    next: '#right_button',
                    prevNextClick: prevNextClickCallback,
            });
		});

		// --------------------------------
		function thresholdImage(imgId, val){
		// --------------------------------
            // If we've thresholded, enable the right button
            enableRight();

			$.post("/threshold/image", {"imgId": imgId, "threshold": val}, function(data){
                // Generate the thresholded image source URL
                imgSrc = "/image/threshold/" + data;

				// Replace the image	
                $("img#threshold_image").attr('src', imgSrc);

                window.thresholdedId = data;
            });	
		}

        // ---------------------------------
        function thresholdTextInputChanged(){
        // ---------------------------------
            // Get & validate the new value
            val = $("#threshold_slider_value_input").attr("value")
            if(val < 0 || val > 255){
                alert("Threshold value must be between 0 and 255");
                return;
            }

            // Update the slider
            $('#threshold_slider').slider('value', val);

            // Threshold the image
            thresholdImage(imageId, val);
        }

        // ----------------
        function thin(ccId){
        // ----------------
            // Get the paramaters
            relativeMax = $("#relative_slider").slider("value");
            absoluteMax = $("#absolute_slider").slider("value");

            // Make the call to the server 
            $.post("/thin/image", 
                {"ccId": window.ccId, "rel_max": relativeMax, "abs_max": absoluteMax}, 
                function(data){
                    // Parse the response
                    response = jQuery.parseJSON(data);

                    // Replace the image	
                    $("#thinned_cell_complex_paper").attr("src", "/thinned_cell_complex/image/" + response[0]);
                    
                    // Enable the thinning iteration slider
                    enableThinningSlider(response[1] + 1);

                });	
        }

        // ------------------
        function showSource(){
        // ------------------
            // Show the correct cell complex
            $("#absolute_cell_complex_paper").fadeOut(0);
            $("#relative_cell_complex_paper").fadeOut(0, function(){
                $("#source_cell_complex_paper").fadeIn(0);
            });

            // Show the correct title
            $("#absolute_cell_complex_title").fadeOut(0);
            $("#relative_cell_complex_title").fadeOut(0);
            $("#source_cell_complex_title").fadeIn(0);
        }

        // ---------------------
        function showAbsolute(){
        // ---------------------
            // Show the correct cell complex
            $("#source_cell_complex_paper").fadeOut(0);
            $("#relative_cell_complex_paper").fadeOut(0, function(){
                $("#absolute_cell_complex_paper").fadeIn(0);
            });
            
            // Show the correct title
            $("#source_cell_complex_title").fadeOut(0);
            $("#relative_cell_complex_title").fadeOut(0);
            $("#absolute_cell_complex_title").fadeIn(0);

        }

        // ---------------------
        function showRelative(){
        // ---------------------
            // Show the correct cell complex
            $("#source_cell_complex_paper").fadeOut(0);
            $("#absolute_cell_complex_paper").fadeOut(0, function(){
                $("#relative_cell_complex_paper").fadeIn(0);
                });
          
            // Show the correct title
            $("#source_cell_complex_title").fadeOut(0);
            $("#absolute_cell_complex_title").fadeOut(0);
            $("#relative_cell_complex_title").fadeIn(0);

        }
	</script>
{% endblock %}

{% block body %} 
<div id="body_container" >
    <!-- Left button -->
    <div id="left_button" class="lr_button">
        <img src='/static/images/left_disabled.png' style="display:none"> 
    </div>

    <div id="app_tabs" >
        <!-- Thresholding tab -->
        <div id="threshold" class="app_tab">
            <div id="images">
                <div class="appImageContainer" style="float: left">
                    <img id="source_image" src="{{ sourceImgUrl }}" />
                    <h4> Source Image </h4>
                </div>
                <div class="appImageContainer" style="float: right">
                    <img id="threshold_image" src="{{ sourceImgUrl }}" />
                    <h4> Thresholded Image </h4>
                </div>
            </div>
            <div id="threshold_slider_container" style="padding: 15px" >
                <div style="width: 65%; float: left; padding-right: 5%">
                    <div id="threshold_slider"></div>
                </div>
                <div id="threshold_slider_value_widget" style="float: right; width: 30%">
                    <a>Value (0-255):</a>
                    <input id="threshold_slider_value_input" type="text" name="threshold_value"
                         value="128" style="width: 5em" onchange="thresholdTextInputChanged()"/>
                </div>
            </div>
        </div>

        <!-- Thinning Tab --> 
        <div id="thin" class="app_tab">
            <div id="cell_complexes">
                <div id="source_cell_complex_container" class="cellComplexContainer" style="float: left">
                    <div id="source_cell_complex_paper_background" class="cellComplexPaperBackground">
                        <!-- Source Cell Complex --> 
                        <iframe id="source_cell_complex_paper" name="thinned_cell_complex_paper" class="cellComplexPaper">
                            <p>Your browser does not suppert iFrames. Download <a href="www.getfirefox.com">Firefox</a> or
                            <a href="www.google.com/chrome">Chrome</a></p>
                        </iframe>

                        <!-- Absolute Cell Complex --> 
                        <iframe id="absolute_cell_complex_paper" name="absolute_cell_complex_paper" class="cellComplexPaper" style="display: none">
                            <p>Your browser does not suppert iFrames. Download <a href="www.getfirefox.com">Firefox</a> or
                            <a href="www.google.com/chrome">Chrome</a></p>
                        </iframe>
                        
                        <!-- Relative Cell Complex --> 
                        <iframe id="relative_cell_complex_paper" name="absolute_cell_complex_paper" class="cellComplexPaper" style="display: none">
                            <p>Your browser does not suppert iFrames. Download <a href="www.getfirefox.com">Firefox</a> or
                            <a href="www.google.com/chrome">Chrome</a></p>
                        </iframe>
                     
                    </div>
                    <div id='source_toggle_container'> 
                        <h4 id='source_cell_complex_title'>Source Cell Complex</h4>
                        <h4 id='absolute_cell_complex_title' style="display: none">R - I</h4>
                        <h4 id='relative_cell_complex_title' style="display: none">1 - (I/R)</h4>

                        <input type="radio" name="stc" value="Source Cell Complex" onclick="showSource()" checked=1 >
                        <input type="radio" name="stc" value="Absolute" onclick="showAbsolute()" checked=0>
                        <input type="radio" name="stc" value="Relative" onclick="showRelative()" checked=0>
                    </div>
                </div>
                <div id="thinned_cell_complex_container" class="cellComplexContainer" style="float: right">
                    <div id="thinned_cell_complex_paper_background" class="cellComplexPaperBackground">
                        <iframe id="thinned_cell_complex_paper" name="thinned_cell_complex_paper" class="cellComplexPaper">
                            <p>Your browser does not suppert iFrames. Download <a href="www.getfirefox.com">Firefox</a> or
                            <a href="www.google.com/chrome">Chrome</a></p>
                        </iframe>
                    </div>
                    <h4> Thinned Cell Complex </h4>
                    
                </div>
            </div>
            <div id="thinning_options_container" style="padding: 15px;">
                <div id="thinning_slider_container" style="padding: 15px; clear:both; width:100%" >
                    <div style="width: 65%; float: left; padding-right: 5%">
                        <div id="thinning_slider"></div>
                    </div>
                    <div id="thinning_slider_value_widget" style="float: right; width: 30%">
                        <a>(0-</a><a id="max_id">100</a>):
                        <input id="thinning_slider_value_input" type="text" name="thinning_value"
                             value="0" style="width: 5em" />
                    </div>
                </div>
                
                <div style="padding-top: 15px">
                    <h4 style="float:left; clear: both; margin-right: 5%">Relative Threshold:</h4>
                    <div id='relative_slider' style="float: left; width: 70%;"></div>
                    <div style="float: right; width: 5%">
                        <input id="relative_max" type="text" maxlength="4" size="10px" value="0.4" style="width:30px;font-size:12" />
                    </div>
                </div>

                <div style="padding-top: 15px"> 
                    <h4 style="clear: both; float:left; margin-right: 5%">Absolute Threshold:</h4>
                    <div id='absolute_slider' style="float: left; width: 70%"></div>
                    <div style="float: right; width: 5%">
                        <input id="absolute_max" type="text" maxlength="5" value="4" style="width:30px;font-size:12" />
                    </div>
                </div>
                <input type="button" value="Run Thinning" style="clear: both; float:right" onClick="thin()"/>
            </div>
        </div>
    </div>
    <div id="right_button" class="lr_button">
        <img src='/static/images/right_disabled.png' style="display:none">  
    </div>
</div>

{% endblock %}
